<template>
  <div v-wechat-title="$route.meta.title=arr.name">
		<div v-if="chenload">
			<div style="font-size: 0.2rem;padding-bottom: 1.08rem">
				<div class="top">
					<img :src="img+arr.thumb" alt="">
					<div class="top1">
					 <div class="top2" :class="arr.is_promotion == 1||arr.is_promotion == '1'?'m1':'m1name'">
						 <p>{{arr.name}}</p>
						 <p></p>
						 <!-- <p v-if="arr.price !=0">￥{{arr.xprice}}</p> -->
						<div style="margin-top: 0.3rem;">
							<span class="a2">{{arr.sales}}人已加入</span>
							<span class="a1" v-if="arr.price == 0">免费</span>
							<span class="a" v-else>￥{{arr.price}}</span>
							<span class="a3">共{{arr.count}}节课</span>
						</div>
					 </div>
						<div class="top3" v-if="arr.is_promotion == 1||arr.is_promotion == '1'"  @click="tuiguang()">
							<img src="../../../src/assets/img/tui.png" alt="">
							<p>推广</p>
						</div>
					</div>

				</div>

				<div v-if="arr.notice" class="chenline-pay"></div>

				<!--活动-->
				<van-notice-bar class="huo1" :text="arr.notice" @click="huo1()" v-if="arr.notice"/>
                <div class="chenline-pay"></div>

				<!--下面tab切换-->
				<div class="tab">
					<van-tabs v-model="active"  swipeable color="#0287FF" title-active-color="#0287FF" title-inactive-color="#C2C9D3">
					<van-tab title="专题详情">
					  <div v-html="arr.description"  class="ht">

					  </div>
					</van-tab>
						<van-tab title="专题目录">
							<div style="padding-bottom: 0.2rem;min-height: 5.5rem">
								<div class="ya" v-for="(item,index) in arr.course" @click="tiao(item)">
									<!-- <div> -->
									<div class="thumbactive1"  v-if="arr.subject==4||arr.subject=='4'">
										<img :src="img+item.thumb" alt="" class="img2">
									</div>
									<!-- 小七里面的专题 -->
									<div v-if="arr.subject==4||arr.subject=='4'" class="thumbactive thumbactive1">
										<p>{{item.name}}</p>
										<p class="p1">
											<div class="activep1">
												<div>
											    <img src="../../../src/assets/img/ren.png" alt="" class="img1">
													<span class="activepeople">{{item.sales}}人已加入</span>
													<!-- <p class="activetime">开播时间:{{item.begin_time}}</p> -->
												</div>
												<div>
													<span class="a1" v-if="item.price == 0||item.price == '0'">免费</span>
													<span class="a" v-else>￥{{item.price}}</span>
													<span class="activeprice" v-if="item.price !=0">￥{{item.xprice}}</span>
												</div>
											</div>
										</p>
									</div>
									<!-- 其他里面的专题 -->
									<div v-else class="thumbactive1 thumbzti">
										<p>{{item.name}}</p>
										<div class="p1">
											<div class="activep1">
												<div>
													<!-- <p class="activetime" v-if="item.type==2||item.flag=='2'">时长:{{item.hours}}分钟</p> -->
													<!--<p class="activetime" v-if="item.flag==3||item.flag=='3'||item.flag==4||item.flag=='4'">{{item.hours}}分钟</p>-->
													<p class="activetime">直播时间:{{item.begin_time}}</p>
												</div>
												<!-- 买了并且不免费 -->
												<!-- <div v-if="arr.is_pay == 1||arr.is_pay == '1'"> -->
												<div v-if="(arr.is_pay == 1||arr.is_pay == '1')&&(Number(arr.price) > 0)">

													<span class="a1 chrn-thumb" v-if="item.flag==3||item.flag=='3'||item.flag==4||item.flag=='4'">观看</span>
													<span class="zboshate zbosthatecolor" v-if="item.flag==1||item.flag=='1'">
														即将播放
													</span>
													<span class='a1active1 acolor' v-if="item.flag==2||item.flag=='2'">
														<img src="../../../src/assets/img/zhibozhong.png" alt="" style="width: 0.2rem;vertical-align: baseline;margin-right:0.05rem">直播中
													</span>
												</div>
												<div v-else>
												    <div v-if="item.price==0||item.price=='0'||item.price==0.00||item.price=='0.00'">
														<span class="a1 chrn-thumb a1active" v-if="item.flag==4||item.flag=='4'">免费</span>
														<span class="zboshate zbosthatecolor" v-if="item.flag==1||item.flag=='1'">
															即将播放
														</span>
														<span class='a1active acolor' v-if="item.flag==2||item.flag=='2'">
															<img src="../../../src/assets/img/zhibozhong.png" alt="" style="width: 0.2rem;vertical-align: baseline;margin-right:0.05rem">直播中
														</span>
													</div>
													<div v-else>
														<!-- <span class="a">￥{{item.price}}</span> -->
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</van-tab>

						<van-tab title="评价">
							<div class="r">
								<mt-loadmore :bottom-method="loadBottom"  :bottom-all-loaded="allLoaded" ref="loadmoredetail">
									<div>
										<div class="doctor" v-for="(item1,index) in comment">
											<img v-if="item1.avatar!=''" :src="item1.avatar" alt="" class="docImg">
											<img v-else :src="activeimg" alt="" class="docImg">
											<div class="content">
												<p>{{item1.nickname}}<span class="commitmain" v-if="item1.flag==1||item1.flag=='1'">(我)</span></p>
												<p>{{item1.addtime}}</p>
												<p>{{item1.content | base64Decode}}</p>
												<p @click="dianzan(item1.id,item1.is_praise,index,item1.praise)">
													<img src="../../../src/assets/img/buy/zan.png" alt="" v-if="item1.is_praise == 1||item1.is_praise == '1'">
													<img src="../../../src/assets/img/buy/grayzan.png" alt="" v-else>
													<span :class="item1.is_praise == 1||item1.is_praise == '1'?'bluezan':'grayzan'">{{item1.praise}}</span>
												</p>
											</div>
											<p style="width: 100%;height: 0.02rem;background: rgba(237,237,237,1);margin-top: 0.2rem;"></p>
											<!--评论-->
											<div v-if="fix&&arr.is_pay==1">
												<img src="../../../src/assets/img/kechengxiangqing/pinglun.png" alt=""  @click="pl()" class="goback" v-if="arr.is_comment == 0||arr.is_comment == '0'">
												<img src="../../../src/assets/img/shenpin.png" alt=""  @click="commitpl()" class="goback" v-else-if="arr.is_comment == 10||arr.is_comment == '10'">
											</div>
										</div>
									</div>
								</mt-loadmore>

							</div>

							<div style="text-align: center;margin-top: 15%;padding-bottom: 10%" v-if="b">
								<div class="chen-kongpicactive">
									<img :src="imgSrc3" mode=""></img>
								</div>
								<div class="chen-kong-text"><span>暂时还没有人评论，
								</span><span>快抢沙发吧…</span></div>
								<!-- <img src="static/img/kechengxiangqing/pinglun.png" alt=""  @click="pl()" class="goback" v-if="arr.is_comment == 0&&fix&&arr.is_pay==1"> -->
								<div v-if="fix&&arr.is_pay==1">
								  <img src="../../../src/assets/img/kechengxiangqing/pinglun.png" alt=""  @click="pl()" class="goback" v-if="arr.is_comment == 0||arr.is_comment == '0'">
								  <img src="../../../src/assets/img/shenpin.png" alt=""  @click="commitpl()" class="goback" v-else-if="arr.is_comment == 10||arr.is_comment == '10'">
								</div>
							</div>
						</van-tab>
					</van-tabs>


				</div>
				<!--支付-->
				<div class="pay">
					<!-- <div>
						<img :src="arr.collection==0?'static/img/shouye/xing.png':'static/img/shouye/yellowstar.png'" alt="" @click="collect()">
						<p>收藏</p>
					</div> -->
					<div v-if="arr.collection==0||arr.collection=='0'">
						<img src="../../../src/assets/img/shouye/xing.png" alt="" @click="collect()">
						<p style="color: #C2C9D3;">收藏</p>
					</div>
					<div v-else>
						<img src="../../../src/assets/img/shouye/yellowstar.png" alt="" @click="collect()">
						<p style="color: #66666;">已收藏</p>
					</div>
					<div v-if="arr.is_pay == 1||arr.is_pay == '1'">
						<button @click="btn()" v-if="arr.price==0||arr.price=='0'||arr.price==0.00||arr.price=='0.00'">
							免费
						</button>
						<button @click="btn()" v-else>
							已购买
						</button>
					</div>
					<div v-else>
						<button @click="btn()" v-if="arr.price==0||arr.price=='0'||arr.price==0.00||arr.price=='0.00'">
							免费
						</button>
                        <div v-else>
							<button @click="btn()" v-if="arr.is_stop==0">
							购买专题 ￥{{arr.price}}
						</button>
						<span v-if="arr.is_stop==1" class="button3">
                           人员已满
						</span>
						</div>
						
					</div>
				</div>

				<!--首页图标-->
				<img src="../../../src/assets/img/goback.png" alt=""  class="goback" v-if="(active == 0 || active == '0')&&fix == true"  @click="goback()">
				<!--推广图标-->
				<img src="../../../src/assets/img/detailkefu.png" alt=""  class="tuiguang" @click="dianhua()" v-if="(active == 0 || active == '0')&&fix == true">
			</div>


			<!--复制链接-->
			<mt-popup v-model="popupVisible3" popup-transition="popup-fade" position="bottom" style="width: 100%;height: 100%;background:rgba(0,0,0,.1);">
				<div style="position: relative;top: 15%;">
					<div style="width: 92%;height: 7.93rem;background: #fff;text-align: center;margin: auto;overflow: hidden;border-radius: 0.08rem">
						<p style="margin-top: 0.94rem">
							<img src="../../../src/assets/img/timg.jpg" alt="" style="width: 3.84rem;height: 3.84rem;">
						</p>
						<section class="form">
							<p class="url">{{url}}</p>
							<button v-clipboard:copy="url"
											v-clipboard:success="onCopy"
											v-clipboard:error="onError" class="fuzhi">
								点击复制链接
							</button>
						</section>
					</div>
				</div>
				<div style="text-align: center;margin-top: 2.3rem">
					<img src="../../../src/assets/img/cha1.png" alt="" style="width: 0.66rem;" @click="un2()">
				</div>
			</mt-popup>

			<!--课程公告-->
			<div class="shoewr-chenhou">
				<div class="chen-contener">
					<p class="chen-title">课程公告</p>
					<p class="chen-text">{{arr.notice}}</p>
					<p class="chen-button" @click="huo2()">确定</p>
				</div>
			</div>



			<!--小七咨询-->
			<div class="shoewr-chen-popu">
				<div class='chen-conactive'>
					<div class="chen-contener-popu">
						<div class="chen-con-pic">
							<img :src="img+serviceinfo.qr_code" alt="">
						</div>
						<a class="chen-phone" @click="phoneclick(serviceinfo.tel)">
							<div class="chen-phone-pic">
								<img src="../../../src/assets/img/kechengxiangqing/zixun.png" alt="">
							</div>
							<span class="chen-tel">{{serviceinfo.tel}}</span>
						</a>
						<p class="chen-sever">
							客服随时为您提供服务</br>
							点击电话即刻咨询<span style="color: #FE9C2B;">(微信同号)</span></p>
					</div>
					<div class="close-chen">
						<img src="../../../src/assets/img/cha1.png" alt="" @click="un1()">
					</div>
				</div>
			</div>

			<!-- 评论审核弹窗 -->
			<div class="shoewr-chen">
				<div class="chen-contener">
					<p class="chen-text">您的评论正在审核中</p>
					<p class="chen-button" @click="chenclick()">确定</p>
				</div>
			</div>

			<!-- 登录弹窗 -->
			<div class="shoewr-chenhoupass">
				<div class="chen-contener chenpass">
					<p class="chen-title">提示</p>
					<p class="chen-text chen-textactive">您需要先登录?</p>
					<div class="chen-but">
						<p class="chen-but-no" @click="repeatclose()">取消</p>
						<p class="chen-but-yes chen-but-yesactive" @click="repeatclick()">去登录</p>
					</div>
				</div>
			</div>


    </div>
		<div class="loadmore" v-else>
			<img src="../../../src/assets/img/load.gif" alt="">
		</div>
  </div>
</template>

<script>
  import { MessageBox } from 'mint-ui';
    export default {
        name: "specialtopic",
      data(){
            return{
			    imgSrc3:require('../../assets/img/kongbai.png'),
				allLoaded:false,
				activeimg:this.$store.state.avatarimg,
				chenload:false,
				loadzheng:false,
				noloadzheng:false,
				phoneurl:this.$store.state.phoneurl,
				active:0,
				arr:[],
				img:this.$store.state.img,
				popupVisible3:false,
				popupVisible1:false,
				url:'https://www.csdn.net/gather_22/MtTaAg2sODk2Mi1ibG9n.html',
				top:'',
				fix:true,
				comment:[],
				b:false,
				page:1,
				serviceinfo:'',
            }
      },
      methods:{
		  // 点击拨打电话
		  phoneclick(tel){
		  	window.location.href = 'tel://'+tel+''
		  },
		// 点击正在审核中的评论按钮
		commitpl(){
			$('.shoewr-chen').fadeIn();
		},
		// 点击确定
		chenclick(){
			$('.shoewr-chen').fadeOut();
		},
        huo1(){
          $('.shoewr-chenhou').fadeIn();
        },
        huo2(){
			$('.shoewr-chenhou').fadeOut();
        },
        dianhua(){
          $('.shoewr-chen-popu').fadeIn();
        },
        un2(){
          this.popupVisible3 = false;
        },
        un1(){
          $('.shoewr-chen-popu').fadeOut();
        },
        onCopy () {
          this.popupVisible3 = false;
          this.$toast({
            message:'复制成功',
          });
          // this.snackBar.info(this.$t('prompt.copySuccess'))
        },
        onError () {
          // this.$message.error(this.$t('prompt.copyFail'))
        },
        tuiguang(){
          this.popupVisible3 = true;
        },
        goback(){
          this.$router.push({
            path:'/'
          })
        },
        pl(){
          this.$router.push({
            path:'/pl',
            query:{
              id:this.$route.query.stid,
              type:2
            }
          })
        },
        collect(){

             var a=localStorage.getItem('token')
            //console.log(a)
            //console.log(this.$route.query.id)
						if(a){
							this.axios.get(this.$store.state.url +'LiveSpec/collect',{
							params:{id:this.$route.query.stid}
							}).then(res=>{
							if(res.data.errcode==0){
							//  console.log(res.data.msg)
							var collect = this.arr.collection;
								 if(collect==0||collect=='0'){
										this.$toast({
											 message:'收藏成功',
											 position:'bottom'
										})
										this.arr.collection = 1;
								 }else{
									 this.$toast({
										 message:'已取消收藏',
										 position:'bottom'
									 })
									 this.arr.collection = 0;
									}
						}else{
							 this.$toast({
							 message:res.data.msg,
							 position:'bottom'
							 })
						}

						})
						}else{
						$('.shoewr-chenhoupass').fadeIn();
						}
				
        },
        tiao(item){
					// console.log(this.arr);
					var arr = this.arr;
					if(arr.subject==4||arr.subject=='4'){    //4小七
						this.$router.push({
							path:'/course',
							query:{
								cid:item.id,
								zid:this.id
							}
						})
					}else{
						if(localStorage.getItem('token')){
							if(item.price == 0||item.price == '0'||item.is_pay==1||item.is_pay=='1'||item.price == 0.00||item.price == '0.00'){
								if(item.flag==2||item.flag=='2'||item.flag==1||item.flag=='1'){
									this.$router.push({
										path:'/demand',
										query:{
											y:'',
											type:1,
											id:item.id,
											cid:'',
											zid:this.id,
											zbo:1,
											url:this.$route.fullPath
										}
									})
								}else if(item.flag==3||item.flag=='3'||item.flag==4||item.flag=='4'){
									this.$router.push({
										path:'/demand',
										query:{
											y:'',
											type:1,
											id:item.id,
											cid:'',
											zbo:0,
											zid:this.id,
											url:this.$route.fullPath
										}
									})
								}
							}
						}else{
							$('.shoewr-chenhoupass').fadeIn();
						}
					}
        },
        btn(){
          if (localStorage.getItem('token')){
				if (this.arr.is_pay == 1 || this.arr.price == 0){

				}else{
					this.axios.get(this.$store.state.url +'Pay/specOrder',{
						 params:{
							 id:this.id,
						 }
					}).then(res=>{
						if(res.data.errcode==0||res.data.errcode=='0'){
							var data = res.data.data;
							this.coursearr=data;
							var order_id = data.id;
							this.$router.push({
							  path:'/order',
								query:{
									id:this.arr.id,
									order_id:order_id,
									type:2,
								}
							})
						}else{
							layer.open({
								content: res.data.msg,
								skin: 'msg',
								time: 2 //1秒后自动关闭
							});
						}
					})
				}
          } else {
           $('.shoewr-chenhoupass').fadeIn();
          }
        },

        qing(){
          this.axios.get(this.$store.state.url +'LiveSpec/special',{
            params:{
              id:this.$route.query.stid
            }
          }).then(res=>{
            // console.log(res.data)
			      this.chenload=true;
            if (res.data.errcode == 0||res.data.errcode == '0'){
                    this.arr = res.data.data;
// 					var url1 = window.location.href.split(':')[0];
// 			        var link =url1+ this.$store.state.linkurltap +'#/x?id='+ this.$route.query.id;
			  // console.log(link);
			  // }
                
				 // var url =url1+ this.$store.state.linkurltap;
				 var url =window.location.href;
				 var obj = {
					 title: this.arr.name,		//分享标题
					 desc: this.$store.state.desc,	//分享内容
					 linkurl: url,//分享链接
					 img: this.$store.state.img+this.arr.thumb,
				 }
				this.sdk.getJSSDK(url,obj,this.$store.state.url);
            }
          })
        },
		// 点击取消
		repeatclose(){
			$('.shoewr-chenhoupass').fadeOut();
		},
		// 点击去登录
		repeatclick(){
			$('.shoewr-chenhoupass').fadeOut();
			this.d();
		},
        dianzan(id,is_praise,index,praise){
			var token = localStorage.getItem('token');
			if(token){
				var that = this;
				 that.axios.get(this.$store.state.url + 'Live/likeComment',{
					params:{
						id:id
					},
				}).then(res=>{
				 if (res.data.errcode == 0||res.data.errcode == '0'){
					 // this.arr = res.data.data
					 if(is_praise==0||is_praise=='0'){
						 that.$toast({
							 message:'点赞成功',
							 position:'bottom'
						 });
						 // that.comment =
						 that.comment[index].is_praise = 1
						 that.comment[index].praise = Number(that.comment[index].praise)+1
					 }else{
						 that.$toast({
							 message:'取消赞成功',
							 position:'bottom'
						 });
						  that.comment[index].is_praise = 0
						 that.comment[index].praise = Number(that.comment[index].praise)-1
					 }
					 // that.pinglun(that.page,that.size);
				 }else{
					 that.$toast({
						 message:res.data.msg,
						 position:'bottom'
					 });
				 }
				})
			}else{
				$('.shoewr-chenhoupass').fadeIn();
			}
        },
		loadBottom(){
			this.allLoaded = true;// if all data are loaded

			this.page++;
			this.pinglun(1);
		},
        pinglun(type){
          //获取评论列表
					var that = this;
					var page = that.page;
					that.axios.get(that.$store.state.url +'Live/commentList',{
						params:{
							id:that.id,
							type:2,
							page:page,
							limit:10
						}
					}).then(res=>{
						// console.log(res.data)
						that.loadzheng=false;
						that.noloadzheng=false;
						if (res.data.errcode == 0||res.data.errcode == '0'){
							var list = res.data.data.lists;
							if (page == 1){
								that.comment = list;
							}else{
								that.comment = that.comment.concat(list);
							}
							if(list.length<10){
								that.allLoaded = true;
							}else{
								if(type==1||type=='1'){
									that.$refs.loadmoredetail.onBottomLoaded();
									that.allLoaded = false;
								}
							}

							// that.comment = res.data.data.lists;

							if (that.comment.length == 0||that.comment.length == '0'){
								that.b = true;
							}else {
								that.b = false
							}
						}
					})
        },





        gun(){
          var  scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
          this.top = scrollTop;
        }
      },
      mounted(){
        this.loginsuccess();

        //获取传来的id
        // console.log(this.$route.query.id)
		this.id = this.$route.query.stid;


       // 获取页面信息（除了评论）
       this.qing();

        //获取评论内容
        this.pinglun(0);

		//获取咨询详情
		this.axios.get(this.$store.state.url + 'find/service_info').then(res=>{
		  // console.log(res.data)
		 if (res.data.errcode == 0||res.data.errcode == '0'){
		   this.serviceinfo = res.data.data
		  }
		})

        //监听上滚动，下滚动

        window.addEventListener('scroll', this.gun)


      },
      watch:{
        top(newName, oldName){
          if (newName > oldName){
            this.fix = false;
          } else {
            this.fix = true;
          }
        }
      }
    }
</script>

<style scoped>
  >>>.van-hairline--top-bottom::after{
    border-width: 0 0;
  }
  >>>.van-tabs__wrap{
    box-shadow:0 3px 5px 0 rgba(71,68,80,0.06);
  }
  .zboshate{
  	background: #999999 !important;
  }
  .acolor{
	  display: inline-block;
	  width: 1.4rem;
	  border-radius: .22rem;
	  line-height:0.44rem;
	  font-size: .26rem;
	  color: #fff;
  }
  .acolor img{
	  margin-left: .18rem;
  }
  .zbosthatecolor{
	  display: inline-block;
	  width: 1.4rem;
	  border-radius: .22rem;
	  line-height:0.44rem;
	  font-size: .26rem;
	  text-align: center;
	  color: #fff;
  }
  .url{
    width: 6.5rem;
    height: 0.5rem;
    margin:0.5rem auto 0;
    border-radius:0.24rem;
    background:rgba(247,247,247,1);
    padding: 0.1rem 0.27rem 0.1rem 0.27rem;
    overflow: hidden;/*超出部分隐藏*/
    white-space: nowrap;/*不换行*/
    text-overflow:ellipsis;/*超出部分文字以...显示*/
  }
  .tab{
    width: 100%;
    margin-top: 0.2rem;
    background: #fff;
  }
  .ya{
    width:92%;
    margin: auto;
    /* height: 1.18rem; */
    margin-top: 0.3rem;
    /* position: relative; */
		display: flex;
		justify-content: space-around;
  }
  .img2{
    width: 2.1rem;
    height: 1.18rem;
    float: left;
    border-radius:0.08rem;
  }
  .ya .thumbactive1{
    /* height: 100%; */
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
  }
  .thumbzti{
	  width: 6.9rem;
	  border: 1px solid #EDEDED;
	  padding: .3rem;
  }
	.thumbactive{
		margin-left: .3rem;
	}
  .ya div p:nth-child(1){
	  width: 4.8rem;
    font-size:0.28rem;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
  }
  .img1{
    width: 0.24rem;
    height: 0.2rem;
    vertical-align: middle;
  }
  .p1{
    width: 100%;
  }
	.thumbactive .activep1{
		width: 4.3rem;
	}
	.activep1{
		/* width: 6.9rem; */
		display: flex;
		justify-content: space-between;
		margin-top: .4rem;
	}
	.activepeople,.activetime{
		color: #C2C9D3;
	}
	.activetime{
		color: #C2C9D3 !important;
		font-size: .24rem !important;
		margin-top: .16rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.activeprice{
		font-size:0.24rem;
		color:rgba(194,201,211,1);
		text-decoration:line-through;
		line-height:0.32rem;
		float: right;
		margin-right: 0.2rem;
	}

  .pay{
    width: 7.5rem;
    height: 0.88rem;
    box-shadow:0px -0.03rem 0.05rem 0px rgba(71,68,80,0.06);
    opacity:0.95;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background:rgba(255,255,255,1);
  }
  .pay img{
    width: 0.4rem;
    height: 0.4rem;
  }
  .pay div{
    font-size:0.24rem;
    color:rgba(194,201,211,1);
    text-align: center;
    margin-left: 0.5rem;
  }
  .pay button{
    width:4.8rem;
    height:0.7rem;
    background:rgba(2,135,255,1);
    border-radius:0.35rem;
    font-size:0.28rem;
    font-weight:bold;
    color:rgba(255,255,255,1);
    border: none;
  }
  .ht{
    width: 100%;
    padding: 0.27rem 0.36rem 0.37rem 0.3rem;
  }
  .ht>>>img{
    width: 100%;
  }
  .ht>>>table{
    display:block;
    width: 100%!important;
  }
  .ht>>>span{
    white-space: normal!important;
  }
  .r{
    background: #fff;
    padding-bottom: 0.2rem;
    overflow: hidden;
  }
  .doctor{
    width: 92%;
    margin: auto;
    margin-top: 0.3rem;
  }
  .docImg{
    width: 0.54rem;
    height: 0.54rem;
    border-radius: 50%;
    vertical-align: top;
  }
	.commitmain{
		color: #F97B43;
		font-size: .24rem;
		display: inline-block;
	}
  .content{
    width: 87%;
    display: inline-block;
    margin-left: 0.2rem;
  }
  .content p:nth-child(1){
    font-size: 0.24rem;
    color:rgba(51,51,51,1);
  }
  .content p:nth-child(2){
    color: #C2C9D3;
    font-size: 0.24rem;
    line-height: 0.32rem;
  }
  .content p:nth-child(3){
    font-size: 0.24rem;
    color: #333;
    margin-top: 0.2rem;
    line-height: 0.32rem;
	word-wrap:break-word;
  }
  .content p:nth-child(4){
    margin-top: 0.15rem;
    float: right;
  }
  .content p:nth-child(4) img{
    width: 0.27rem;
    vertical-align: middle;
  }
  .bluezan{
    font-size:0.22rem;
    color:rgba(2,135,255,1);
    line-height:0.19rem;
    vertical-align: middle;
  }
  .grayzan{
    font-size:0.22rem;
    color:#C2C9D3;
    line-height:0.19rem;
    vertical-align: middle;
  }
  .tuiguang{
    width: 1rem;
    position: fixed;
    right: 0.2rem;
    bottom: 2.7rem;
  }
  .goback{
    width: 1rem;
    position: fixed;
    right: 0.2rem;
    bottom: 1.5rem;
  }
  .fuzhi{
    width:3.3rem;
    height:0.7rem;
    background:rgba(2,135,255,1);
    border-radius:0.35rem;
    font-size: 0.28rem;
    font-weight: bold;
    margin-top: 0.5rem;
    outline: none;
    border: none;
    color: #fff;
  }
  .top{
    background: #fff;
  }
  .top img{
    width: 100%;
    height: 4.25rem;

  }
  .top1{
    width: 92%;
    margin: auto;
    margin-top: 0.19rem;
    background: #fff;
    display:flex;
    justify-content:center;
    align-items:center;
  }
	.m1{
	  width: 83%;
		padding-right: .3rem;
	}
	.m1name{
	  width: 100%;
	}
  .top2{
    float: left;
    padding-bottom: 0.2rem;
  }
  .top1:after{
    content: '';
    display: block;
    clear: both;
  }
  .top2 p:nth-child(1){
    width: 100%;
    font-size:0.28rem;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
  }
  .top2 p:nth-child(2){
    width: 100%;
    font-size:0.24rem;
    text-decoration:line-through;
    color:rgba(194,201,211,1);
   text-align: right;
  }
  .a2{
    font-size:0.24rem;
    color:rgba(194,201,211,1);
    line-height:0.32rem;

  }
  .a{
    font-size:0.3rem;
    color:#FF0214;
    line-height:0.32rem;
    font-weight:bold;
    float: right;
  }
  .a1active{
	  background: #FE9C2B !important;
  }
  .a1active1{
	  background: #0287FF !important;
  }
  .a1{
    font-size:0.3rem;
    font-weight:bold;
    color:#0287FF;
    line-height:0.32rem;
    float: right;
  }
	.chrn-thumb{
		width:1.4rem;
		height:.44rem;
		background:#0287FF;
		color: #fff;
		border-radius:.22rem;
		line-height: .44rem !important;
		text-align: center;
		font-size: .26rem;
	}
  .a3{
    font-size:0.24rem;
    color:rgba(194,201,211,1);
    line-height:0.32rem;
    float: right;
    margin-right: 0.2rem;
  }

  .top3{
    height: 100%;
    margin-left: 0.3rem;
    margin-bottom: 0.2rem;
		padding-left: .3rem;
		border-left: 1px solid #EDEDED;
  }
  .top3 img{
    width: 0.34rem;
    height: 0.46rem;
  }
  .top3 p{
    font-size:0.2rem;
    font-weight:500;
    color:rgba(2,135,255,1);
  }
  .huo1{
    width: 100%;
    height: 0.5rem;
    background:rgba(252,229,211,1);
    margin: 0.2rem 0;
    color:rgba(226,47,58,1);
  }
  /*.huo1 p{*/
    /*width: 92%;*/
    /*height: 0.5rem;*/
    /*line-height: 0.5rem;*/
    /*margin: auto;*/
    /*font-size:0.24rem;*/
    /*color:rgba(226,47,58,1);*/
    /*overflow: hidden;*/
    /*text-overflow:ellipsis;*/
    /*white-space: nowrap;*/
  /*}*/
  .button3{
     width: 4.8rem;
    height: 0.7rem;
   
    border-radius: 0.35rem;
    font-size: 0.28rem;
    font-weight: bold;
    color: rgba(255,255,255,1);
    border: none;
	display: block;
	line-height: 0.7rem;
	text-align: center;
	background-color: rgb(153, 153, 153);
}
  
</style>

